<template>
	<div class="hello_contestant">
		<div>
			<div class="contesant_title clearfix">
				<span @click="goBack" class="left">返回</span>
				<span class="left">我的选手</span>
				<span class="left add_con">添加选手</span>
			</div>
		</div>
		<div class="userInfor clearfix">
			<img src="../../../assets/u5020.png" class="left" />
			<div class="left user">
				<div class="username">汪汪汪</div>
				<div class="level">5段</div>
			</div>
			<div class="shu_line left"></div>
			<button class="left">移交监护权</button>
			<div class="shu_line left"></div>
			<button class="left" >修改</button>
		</div>
		<div class="userInfor clearfix">
			<img src="../../../assets/u5020.png" class="left" />
			<div class="left user">
				<div class="username">汪汪汪</div>
				<div class="level">5段</div>
			</div>
			<div class="shu_line left"></div>
			<button class="left">移交监护权</button>
			<div class="shu_line left"></div>
			<button class="left">修改</button>
		</div>
		<div class="userInfor clearfix"> 
			<div class="left user">
				<div class="username">汪汪汪</div>
				<div class="level">5段</div>
			</div>
			<button class="right delete" @click="deleter">删除</button>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
import { Tabbar, TabItem } from 'mint-ui';

	export default{
		data() {
			return {
				selected:true
			}
		},
		methods: {
			deleter: function(){				
				confirm('确定要删除吗?').then(action => {
					alert("删除成功！")
				});
			},
			goBack:function(){
				this.$router.push({path:'/myapp'})
			}
			
		}
	}
</script>

<style>
	body{
		margin:0px;
		padding: 0px;
	}
.clearfix:after{
	clear: both;
	content:'' ;
	display: block;	
}
.left{
	float:left
}
.right{
	float:right
}
.hello_contestant{
	border-bottom: 1px solid #ccc;
}
.contesant_title{
	background: #4682B4;
	font-size: 0.4rem !important;
	color: #fff;
	padding: 20px 0 20px 10px;
	
}
.contesant_title>span {
	width: 33%;
}
.add_con{
	text-align: right;
}
.shu_line{
		width: 1px;
		height: 40px;
		background-color:#CCCCCC;
		padding-top: 5px;
	}
.hello_contestant .userInfor{
		margin-top: 10px;
		padding-left: 10px;
		color: #000;
	}
	.userInfor img{
		display: block;
	}
	.user{
		width: 30%;
		font-size: 0.25rem !important;
		padding-left: 10px;
	}
	.username{
		font-size: 0.25rem !important;
	}
	.userInfor button{
		padding: 10px 20px;
		background-color: #fff;
		border: none;
		line-height: 40px;
		font-size: 0.25rem !important;
		font-weight: 600;
	}
	.delete{
		background-color: red !important;	
		color: #fff;	
	}
</style>